/*
 * layui的初始化模块可以理解为，引入这个模块的js文件
 * 值得注意的是：layui的模块之间存在依赖关系，例如引入了table模块，它会layui/lay/moudules/table.js
 * 这个文件引入进来，并且它还会将这个模块所依赖的其他模块自动加入进来，
 * 实际引入的模块有：table、form、jquery、layer、laypage、laytpl、util，7个js文件
 * 所以我仅仅初始化了table模块，却能获得form、jquery、layer的模块对象
 */
//layui初始化表格模组

layui.use(['table'], function(){
  //获得模块对象
  var table = layui.table;
  var form = layui.form;
  var $ = layui.jquery;
  var layer = layui.layer;
  
  /*layui.ready(function(){
	  var province,city,district;
	  
  })*/
  
  //数据表格渲染
  var subareaTable = table.render({
    elem: '#subareaTable'
    ,url:'base/subareas'
    ,method: 'get'
    ,where: {} // 你额外要携带数据，以键值对的方式存入
    ,toolbar: '#areaToolbar' // 开启头部工具栏，并为其绑定左侧模板
    ,cellMinWidth: 80 // 全局定义所有常规单元格的最小宽度（默认：60）
    ,cols: [[
      {type:'numbers'} // 序号
      ,{type: 'checkbox'} // 复选框
      ,{field:'subareaId', title:'分区ID'}
      ,{field:'subareaName', title:'分区名'}
      ,{field:'areaId', title:'区域Id'}
      ,{field:'province', title:'省'}
      ,{field:'city', title:'市'}
      ,{field:'district', title:'县(区)'}
      ,{field:'ripAreaName', title: '定区名'}
      ,{field:'startNumber', title:'起始号'}
      ,{field:'endNumber', title: '终止号'}
      ,{field:'oddEvenNumber', title:'单双号'}
     // ,{field:'isOuterNet', title:'是否外网'}
      ,{field:'useable', title:'是否可用',templet:function(d){
    	  if(d.useable == 'Y'){
    		  return "可用";
    	  }else{
    		  return "不可用";
    	  }
      }}
      ,{field:'description', title:'描述'}
      ,{fixed: 'right', align: 'center', title:'冻结或还原', width:100, templet: '#checkboxTpl', unresize: true}
      //,{fixed: 'right', align: 'center', title:'操作', width:120, toolbar: '#resourceBar', unresize: true}
    ]]
    ,page: true // 开启分页
    ,limit: 10 // 每页显示的条数
    ,limits: [5,10,20,50,100] // 每页条数的选择项
    ,loading: true // 是否显示加载条(切换分页的时候显示）
    ,title: '分区数据表' // 定义 table 的大标题（在文件导出等地方会用到）
    //,id: 'subareaTable' // 设定容器唯一 id
    ,even: false // 隔行变色
  });
  
  //头部搜素表单提交
  form.on('submit(subareaSearchBtn)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  //执行后台代码
	  var data = data.field;
	  subareaTable.reload({
		  where : {
			  'subareaName':data.subareaName,
			  'province':data.province,
			  'city':data.city,
			  'district':data.district,
			  'useable':data.useable
		  },
		  page : {
			  curr : 1
		  }
	  });
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });
  
  //新增表单提交
  form.on('submit(addSubareaBtn)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  //执行后台代码
	  $.ajax({
		  type:"post",
			url:'base/subarea',
			data:data.field,
			success:function(result) {
				if (result == 1) {		
					layer.msg('添加成功!');
				} else {
					layer.msg('添加失败!');
				}
				//刷新数据表格
				table.reload('subareaTable', {url: 'base/subareas'});
			}
	  })
	  layer.closeAll();
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });
 
  
  //修改表单提交
  form.on('submit(updateSubareaBtn)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  //执行后台代码
	  $.ajax({
		type:"post",
		url:'base/subarea',
		data:data.field,
		success:function(result) {
			if (result == true) {		
				layer.msg('修改成功!');
			} else {
				layer.msg('修改失败!');
			}
			layer.closeAll();
			//刷新数据表格
			table.reload('subareaTable', {url: 'base/subareas'});
		}
	});
	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });
  
  //头工具栏事件
  table.on('toolbar(subareaTableEvent)', function(obj){
	 //获取当前表格选中状态和选中的数据
	var checkStatus = table.checkStatus(obj.config.id);
	//区分点击的按钮
    switch(obj.event){
      case 'addArea':
    	  //弹出新增模态框
    	  initAddResourceModal();
      break;
      case 'updateSubarea':
    	  //选择的数据数量
    	  if (checkStatus.data.length > 1) {
    		  layer.alert('最多也只能选择一行');
    	  } else if (checkStatus.data.length < 1) {
    		  layer.alert('最少要选择一行');
    	  }else if (checkStatus.data[0].useable =='N') {
    		  layer.alert('您选择的已被禁用了，请重新选择！');
    	  } else {
    		  //弹出修改模态框，传递当前选中的一行数据过去
    		  initupdateSubareaModal(checkStatus.data[0]);
    	  }
      break;
      case 'removeSubarea':
    	  //当前选中行的数据
    	  var data = checkStatus.data;
    	  if(checkStatus.data.length < 1) {
    		  layer.alert('请选择一行！');
    	  } else {
    		//调用删除方法，传递要删除的行的数据
        	  removeSubarea(data);
    	  }
      break;
      case 'restoreSubarea':
    	  //当前选中行的数据
    	  var data = checkStatus.data;
    	  //调用删除方法，传递要删除的行的数据
    	  if(checkStatus.data.length < 1) {
    		  layer.alert('请选择一行！');
    	  } else {
    		  restoreSubarea(data);
    	  }
      break;
      case 'manageSubarea':
    	   var data = checkStatus.data;
    	   initManageSubareaModal(data);
      break;
    };
  });
  
  //监听工具条 
  table.on('tool(subareaTableEvent)', function(obj){
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    if(layEvent === 'del'){ //删除
      layer.confirm('确认删除吗？', function(index){
    	//把当前要删除的数据放入数组，因为删除方法要的是一个数组对象
    	var objArray = new Array(data);
        //调用删除方法，传递要删除的行的数据
        removeSubarea(objArray);
        //关闭当前页面
        layer.close(index);
      });
    } else if(layEvent === 'edit'){ //编辑
      //弹出修改模态框，传递当前选中的一行数据过去
      initupdateSubareaModal(data);
    }
  });
  
  //监听锁定操作
  form.on('switch(areable)', function(obj){
	//资源ID
	var subareaId = obj.value;
	//定义提示信息, 状态
	var msg, useable;
	if (this.checked) {
		msg = "还原", useable = 'Y';
	} else {
		msg = "禁用", useable = 'N';
	}
	//发送异步请求冻结或还原资源
    $.ajax({
    	async: false, //默认为true，false表示同步，如果当前请求没有返回则不执行后续代码
		type: "post", 
		url:'base/frozenORrecoverSubarea',
		data : {
			subareaId:subareaId,
			useable:useable,
		},
		datatype : 'json',
		success:function(result) {
			if (result == true) {
				layer.msg(msg + "成功！", {
				  icon: 1, //图标，可输入范围0~6
				  time: 2500 //2秒关闭（如果不配置，默认是3秒）
				});   
			} else {
				layer.msg(msg + "失败！", {icon: 2, time: 2500}); 
			}
			//刷新数据表格
			table.reload('subareaTable', {url: 'base/subareas'});
		}
	});
  });
  
  //关闭模态框 新增和修改模态框共用这个点击事件
  $(".modalClose").click(function(){
	  //关闭页面上所有类型的所有弹框
	  layer.closeAll();
  });
  
  //逻辑删除分区的方法
  var removeSubarea = function(data){
	  //定义一个要删除的所有分区ID的字符串
	  var subareaIdStr = "";
	  //遍历传递过来的要删除的数据
	  for (var i = 0; i < data.length; i++) {
		  if(data[i].useable == "N"){
			  	layer.msg('您选择的已被禁用了');
				return;
			}
		  //拿出分区ID进行拼接
		  subareaIdStr += data[i].subareaId + ",";
	  }
	  //截取掉因为拼接产生的多余的一个逗号
	  subareaIdStr = subareaIdStr.substring(0, subareaIdStr.length - 1);
	  //向服务端发送删除指令
	  //layer.alert('删除=' + subareaIdStr);
	  layer.confirm('确认冻结吗?', {icon: 3, title:'提示'}, function(index){
		  $.ajax({
				type: "post", 
				url:'base/frozenORrecoverSubarea',
				data : {subareaIdStr:subareaIdStr},
				success:function(result) {
					if (result == true) {
						layer.msg('冻结成功!',{icon: 1, time: 2500});
					} else {
						layer.msg('冻结失败!',{icon: 1, time: 2500});
					}
					//刷新数据表格
					table.reload('subareaTable', {url: 'base/subareas'});
				}
		  	});
		  layer.close(index);
		});
	  
  }
  
  //还原区域的方法 公用
  var restoreSubarea = function(data){
	//定义一个要删除的所有分区ID的字符串
	  var subareaIdStr = "";
	  //遍历传递过来的要删除的数据
	  for (var i = 0; i < data.length; i++) {
		  if(data[i].useable == "Y"){
			  	layer.msg('您选择的正在使用中');
				return;
			}
		  //拿出分区ID进行拼接
		  subareaIdStr += data[i].subareaId + ",";
	  }
	  //截取掉因为拼接产生的多余的一个逗号
	  subareaIdStr = subareaIdStr.substring(0, subareaIdStr.length - 1);
	  //向服务端发送删除指令
	  layer.confirm('确认还原吗？', {icon: 3, title:'提示'}, function(index){
		  $.ajax({
				type: "post", 
				url:'base/restoreRrecoverSubarea',
				data : {subareaIdStr:subareaIdStr},
				success:function(result) {
					if (result == true) {
						layer.msg('还原成功!',{icon: 1, time: 2500});
					} else {
						layer.msg('还原失败!',{icon: 1, time: 2500});
					}
					//刷新数据表格
					table.reload('subareaTable', {url: 'base/subareas'});
				}
		  	});
		  layer.close(index);
		});
  	}
  
  //初始化管理模态框
  var initManageSubareaModal = function(data){
	  //弹出一个页面层
	  layer.open({
		  type: 1 // 基本层类型0~4，1为页面层
		  ,title: '管理分区' // 标题
		  ,area: ['800px', '550px'] // 宽高 只写一个参数就是表示宽度，高度会自适应
		  ,content: $("#manageSubareaModal") // 文本、html都行
	      ,anim: 0 // 弹出动画
		  ,resize: false // 是否允许拉伸
		  ,btn: ['提交', '关闭'] //只是为了演示
	      ,yes: function(){
	    	  $.ajax({
		  			type:"post",
		  			url:'base/manageSubarea',
		  			data:form.val("manageSubareaForm"),
		  			success:function(result) {
		  				if (result == true) {		
		  					layer.msg('修改成功!');
		  				} else {
		  					layer.msg('修改失败!');
		  				}
		  				layer.closeAll();
		  				//刷新数据表格
		  				table.reload('subareaTable', {url: 'base/subareas'});
		  			}
	  			});
	  	    	return false;
	       }
	       ,btn2: function(){
	         layer.closeAll();
	       }
		  ,end : function(){ // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
			  //清空表单
    		  $("#manageSubareaForm")[0].reset();
		  }    
	  });
	  
	  var ids = "";
	  var html = "";
	  for (var i = 0; i < data.length; i++) {
		  ids += data[i].subareaId + (i == data.length-1 ? "":",");
		  console.info(ids)
		  html+= "<tr>"+"<td>"+ data[i].subareaName + "</td>"+"<td>"+ data[i].province+"</td>"+"<td>"+ data[i].city + "</td>"+"<td>"+ data[i].district + "</td>"+"</tr>";
	  }
	  $("#tb tbody").html(html);
	  
	  //为管理表单赋值
	  form.val('manageSubareaForm', {
		  "subareaId": ids
	  });
  }
  
  //初始化新增模态框
  var initAddResourceModal = function(){
	  //弹出一个页面层
	  layer.open({
		  type: 1 // 基本层类型0~4，1为页面层
		  ,title: '添加分区' // 标题
		  ,area: ['400px', '550px'] // 宽高 只写一个参数就是表示宽度，高度会自适应
		  ,content: $("#addResourceModal") // 文本、html都行
	      ,anim: 0 // 弹出动画
		  ,resize: false // 是否允许拉伸
		  ,end : function(){ // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
			  //清空表单
    		  $("#addResourceForm")[0].reset();
		  }    
	  });
  }
  
  //初始化修改模态框
  var initupdateSubareaModal = function(data){
	  $("#updateSubareaForm #_method").val("put");
	  //弹出一个页面层
	  layer.open({
		  type: 1 // 基本层类型0~4，1为页面层
		  ,title: '修改分区' // 标题
		  ,area: ['400px', '550px'] // 宽高 只写一个参数就是表示宽度，高度会自适应
		  ,content: $("#updateSubareaModal") // 文本、html都行
		  ,anim: 0 // 弹出动画
		  ,resize: false // 是否允许拉伸
		  ,end : function(){ // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
			  //清空表单
    		  $("#updateSubareaForm")[0].reset();
		  }    
	  });
	  //表单赋值
	  form.val('updateSubareaForm', {
		  "subareaId": data.subareaId
		  ,"subareaName": data.subareaName
	      ,"province": data.province
	      ,"city": data.city
	      ,"district": data.district
	      ,"startNumber": data.startNumber
	      ,"endNumber": data.endNumber
	      ,"oddEvenNumber": data.oddEvenNumber
	      ,"useable": data.useable
          ,"description": data.description
	  });
  }
  
  //为省下拉框赋值
  $.ajax({
		type:"get",
		url:'base/findAllProvince',
		success:function(result) {
			//province = result;
		    var mh_options = "<option value=''>请选择</option>";
		    for(var i=0;i<result.length;i++){
		        mh_options += "<option value='"+result[i].province+"'>"+result[i].province+"</option>";
		    }
		    $("#addResourceModal #province").append(mh_options);
		    //console.info(mh_options)
		    form.render('select');
		}
  })
  
  //为市下拉框赋值
  form.on('select(province)', function(data){
	  $("#addResourceModal #city").html("");
	  $("#addResourceModal #district").html('');
	  var province = data.value;
	  $.ajax({
			type:"get",
			data:{province:province},
			url:'base/findAllCity',
			success:function(result) {
				var mh_options = "<option value=''>请选择</option>";
			    for(var i=0;i<result.length;i++){
			        mh_options += "<option value='"+result[i].city+"'>"+result[i].city+"</option>";
			    }
			    $("#addResourceModal #city").append(mh_options);
			    //console.info(mh_options)
			    form.render('select');
			}
		});
	})
	//为县(区)下拉框赋值
	form.on('select(city)', function(data){
		  $("#addResourceModal #district").html('');
		  var city = data.value;
		  $.ajax({
				type:"get",
				data:{city:city},
				url:'base/findAllDistrict',
				success:function(result) {
					var mh_options = "<option value=''>请选择</option>";
				    for(var i=0;i<result.length;i++){
				        mh_options += "<option value='"+result[i].district+"'>"+result[i].district+"</option>";
				    }
				    $("#addResourceModal #district").append(mh_options);
				    //console.info(mh_options)
				    form.render('select');
				}
			});
	});  
  
  //为管理分区模态框中的下拉框赋值
  $.ajax({
		type:"get",
		url:'base/findAllRipareaName',
		success:function(result) {
		    var mh_options = "<option value=''>请选择</option>";
		    for(var i=0;i<result.length;i++){
		        mh_options += "<option value='"+result[i].ripAreaId+"'>"+result[i].ripAreaName+"</option>";
		    }
		    $("#manageSubareaModal #ripAreaId").append(mh_options);
		    //console.info(mh_options)
		    form.render('select');
		}
  })
	
});
